<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
const apiKey = 'user'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  id: undefined,
  type: 1,
  username: "",
  nickname: '',
  password: '',
  phone: '',
  role_id: '',
  image: '',
  num: '',
  /**
   * <el-table-column label="名称" prop="nickname" />
   <el-table-column label="工作年限" prop="year" />
   <el-table-column label="所在律所" prop="address" />
   <el-table-column label="学历" prop="background" />
   <el-table-column label="最高学历" prop="max_background" />
   <el-table-column label="专业领域" prop="area" />
   <el-table-column label="专业认证" prop="professional_certification" />
   <el-table-column label="专业平台认证" prop="platform_authentication" />
   */
  year: '',
  address: '',
  background: '',
  max_background: '',
  area: '',
  professional_certification: 1,
  platform_authentication: 1,
  profile: ''
})
const roleList = ref([])
const rules = ref({
  username: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  nickname: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  role_id: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择', trigger: 'blur' },
  ]
})
http.role.list().then(res => {
  roleList.value = res.data
})
const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c j-b">
      <div class="form-box form-box2">
        <el-form ref="formRef" style="width: 660px" :model="formData" :rules="rules" label-position="top" >
         <el-row :gutter="20">
           <el-col :span="24">
             <el-form-item label="角色" prop="role_id">
               <el-select v-model="formData.role_id">
                 <el-option
                     v-for="item in roleList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="账号" prop="username">
               <el-input clearable v-model="formData.username"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="姓名" prop="nickname">
               <el-input clearable v-model="formData.nickname"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="密码" prop="password">
               <el-input clearable v-model="formData.password" type="password"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="phone">
               <el-input clearable v-model="formData.phone"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="头像" prop="image">
               <UploadImage v-model:image="formData.image"/>
             </el-form-item>
           </el-col>
            <el-col :span="12">
              <el-form-item label="工作年限" prop="year">
                <el-input clearable v-model="formData.year"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在律所" prop="address">
                <el-input clearable v-model="formData.address"></el-input>
              </el-form-item>
            </el-col>
           <el-col :span="12">
             <el-form-item label="律师编号" prop="num">
               <el-input clearable v-model="formData.num"></el-input>
             </el-form-item>
           </el-col>
            <el-col :span="12">
              <el-form-item label="学历" prop="background">
                <el-input clearable v-model="formData.background"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" prop="max_background">
                <el-input clearable v-model="formData.max_background"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业领域" prop="area">
                <el-input clearable v-model="formData.area"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业认证" prop="professional_certification">
                <el-switch :active-value="1" :inactive-value="0" v-model="formData.professional_certification"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业平台认证" prop="platform_authentication">
                <el-switch :active-value="1" :inactive-value="0" v-model="formData.platform_authentication"/>
              </el-form-item>
            </el-col>
           <el-col :span="24">
             <el-form-item label="profile" prop="profile">
               <el-input type="textarea" :rows="3" v-model="formData.profile"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<style lang="scss">
.form-box2 {
  display: flex;
  .gap {
    width: 32px;
  }
  .avatar-uploader {
    width: 100%;
  }
  .avatar-uploader .avatar {
    width: 100%;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-upload {
    width: 100%;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 120px;
    text-align: center;
  }
}
</style>
